<template>
    <div>
        <el-select v-model="value" placeholder="请选择" @change="getGoodsList">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" show-overflow-tooltip width="55">
            </el-table-column>
            <el-table-column prop="good_weight" label="赏品权重" show-overflow-tooltip>
                <template v-slot="scope">
                    <el-input placeholder="请输入赏品权重（正整数）" v-model="scope.row.good_weight" @input="add"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="120">
            </el-table-column>
            <el-table-column prop="display_url" label="赏品图片" width="120">
            </el-table-column>
            <el-table-column prop="stock" label="商品库存" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="price" label="盒子金额" show-overflow-tooltip>
                <template v-slot="scope">
                    <el-button type="warning" size="small">￥{{ format_money(scope.row.price) }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="integral" label="是否返积分" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="hide" label="是否隐藏" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="min_disarster" label="矿难" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="guarant" label="保底" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="state" label="赏品状态" show-overflow-tooltip>
                <template v-slot="scope">
                    <span v-if="scope.row.state == 0">未上架</span>
                    <span v-else-if="scope.row.state == 1">已上架</span>
                    <span v-else>已上架</span>
                </template>
            </el-table-column>
            <el-table-column prop="deleted" label="是否被删除" show-overflow-tooltip>
                <template v-slot="scope">
                    <span v-if="scope.row.deleted == 0">否</span>
                    <span v-else>是</span>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="confirm">确认</el-button>
    </div>
</template>

<script>
    import list from "../../../api/jurisdiction"
    import {format_money} from "@/utils/format";
export default {
        data() {
        return {
            tableData: [],
            value:"",
            options: [
                    {
                    value: '其他',
                    label: '通用'
                    },
                    {
                    value: '海贼',
                    label: '海贼'
                    },
                    {
                    value: '龙珠',
                    label: '龙珠'
                },
                    {
                    value: '高达',
                    label: '高达'
                },
                    {
                    value: '潮玩',
                    label: '潮玩'
                },
                    {
                    value: 'LSP',
                    label: 'LSP'
                },
            ],
                // 测试数据
                // 已选列表
                selectList: [],
                // 传给后端的列表
            postList: [],
                // 已选完整版列表
                // fullList:[]
            }
        },
        created() {
            this.getGoodsList()
    },

    methods: {
      format_money,
        // 获取所有无限赏赏品列表
        getGoodsList() {
            list.getgoods({ params: { list: 1, page: 1, num: 10, method: 3, ip_family: this.value } }).then((res) => {
            res.data.map((value, index, array) => {
                this.$set(value, "good_weight", "")
            })
                this.tableData = res.data
                console.log(this.tableData)
            }).catch(err => {
                if (err.data.code === -10002) {
                    this.$message.warning("登录已过期")
                    this.$router.push("/login")
                }
                console.log(err)
            })
            //  console.log('后端获取原数组',this.tableData)
        },
        handleSelectionChange(val) {
            this.selectList = val;
            console.log(this.tableData)
        },
        add() {
            this.postList = [];
            this.selectList.map((v, i, array) => {
            this.postList.push({good_uuid: v.uuid,good_weight:v.good_weight })
           })
            console.log(this.postList)
        },
        confirm() {
            console.log("要发送的数组：",this.postList)
            console.log("展示的数组", this.selectList)
            this.$router.push("/layout/choushangguanli/tianjiawuxianshang")
            this.$store.commit("WUXIANCHI_SELECT_LIST",this.postList)
            this.$store.commit("WUXIANSHANG_SELECT_FULLLIST", this.selectList)
        }
        },
    }
</script>

<style lang="less" scoped>

</style>